<template>
  <div class="u-left-menu">
    <a-menu
      :default-selected-keys="defaultSelectedKeys"
      :default-open-keys="defaultOpenKeys"
      mode="inline"
      theme="dark"
      :inline-collapsed="collapsed"
      :key="randomKey"
      class="diy-menu"
    >
      <template v-for="item in leftMenuList">
        <!-- 无children，无三级菜单 -->
        <a-menu-item :key="item.key" v-if="!item.children">
          <router-link :to="item.linkPath">
            <a-icon :type="item.iconType" />
            <span>{{ item.name }}</span>
          </router-link>
        </a-menu-item>
        <!-- 有children，有三级菜单 -->
        <a-sub-menu :key="item.key" v-if="item.children">
          <span slot="title">
            <a-icon :type="item.iconType" />
            <span>{{ item.name }}</span>
          </span>
          <!-- 有的只有二级菜单无三级菜单 -->
          <template>
            <a-menu-item v-for="sub in item.children" :key="sub.key">
              <router-link :to="sub.linkPath">
                {{ sub.name }}
              </router-link>
            </a-menu-item>
          </template>
        </a-sub-menu>
      </template>
    </a-menu>
    <!-- 自定义折叠展开触发器 -->
    <div class="diy-trigger">
      <a-icon
        type="menu-unfold"
        v-if="collapsed"
        @click="() => (collapsed = !collapsed)"
      />
      <a-icon type="menu-fold" v-else @click="() => (collapsed = !collapsed)" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    leftMenuList: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  watch: {
    collapsed(nv, ov) {
      if (nv) {
        document.getElementsByClassName("diy-menu")[0].style.width = "88px";
      } else {
        document.getElementsByClassName("diy-menu")[0].style.width = "178px";
      }
    },
  },
  data() {
    return {
      //   defaultSelectedKeys: ["user-portrait"], // 默认选中的菜单
      //   defaultOpenKeys: ["statistic-analyze"], // 默认打开的菜单
      defaultSelectedKeys: [], // 默认选中的菜单
      defaultOpenKeys: [], // 默认打开的菜单
      collapsed: false,
      randomKey: 1, // 解决视图不渲染问题
    };
  },
  mounted() {
    console.log(this.$route.meta);
    this.init();
  },
  methods: {
    // 初始化-选中与打开的key,二级菜单第一个即可
    init() {
      this.defaultOpenKeys = [this.leftMenuList[0].key];
      //  判断有无children,
      if (this.leftMenuList[0].children) {
        this.defaultSelectedKeys = [this.leftMenuList[0].children[0].key];
      } else {
        this.defaultSelectedKeys = [this.leftMenuList[0].key];
      }
      this.randomKey = this.$uuid.gen();
    },
  },
};
</script>

<style lang="less" scoped>
.u-left-menu {
  background-image: url(/static/images/header-menu/left-bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  .diy-menu {
    width: 178px;
    position: relative;
    top: -42px;
    .ant-menu-item {
      height: 70px;
      line-height: 70px;
      &.ant-menu-item-selected {
        background-color: transparent;
        background-image: linear-gradient(to right, #127174, #152a3f);
      }
    }
    .ant-menu-submenu {
      .ant-menu-item {
        height: 43px;
        line-height: 43px;

        &.ant-menu-item-selected {
          background-image: url("/static/images/header-menu/left-menu-active.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-color: #13444f;
        }
      }
    }
  }

  .diy-trigger {
    position: absolute;
    bottom: 25px;
    width: 100%;
    text-align: center;
    color: #93b2b9;
    svg {
      width: 18px;
      height: 16px;
    }
  }

  /deep/ .ant-menu-submenu-selected {
    .ant-menu-submenu-title {
      border-left: 2px solid #10cfbb;
    }
  }
}
</style>
